(function () {
    // 获取电梯导航元素,获取返回顶部元素
const elevator = document.querySelector('.xtx-elevator')
const backTop = document.querySelector('#backTop')
// 给window绑定滚动事件，作判断，如果卷去的距离大于300,则透明度opacity为1，否则为0
window.addEventListener('scroll', function () {
    // if (document.documentElement.scrollTop > 300) {
    //     elevator.style.opacity='1'
    // } else {
    //     elevator.style.opacity='0'
    // }

    // 三元
    const n = document.documentElement.scrollTop
    elevator.style.opacity = n >= 300 ? '1' : '0'
})
// 返回顶部，给返回顶部元素绑定点击事件，点击返回顶部按钮 滚动位置为0，0
backTop.addEventListener('click', function () {
    document.documentElement.scrollTo(0,0)
});
})();

// 立即执行函数，可以防止域名污染
(function () {
    // 获取电梯导航元素，还有新鲜好物，人气推荐，热名品牌，最新专题元素
    const elevator = document.querySelector('.xtx-elevator')
    
    const newGoods = document.querySelector('.xtx_goods_new')
    const popular = document.querySelector('.xtx_goods_popular')
    const brand = document.querySelector('.xtx_goods_brand')
    const topic = document.querySelector('.xtx_goods_topic')

    // 给电梯导航里li a 绑定点击事件，这里要用到委托事件获取到每个li,做if判断
    // 如果e.target.tagName为A并且为自定义属性名的话 嵌套等值switch判断
    // 如果自定义属性名等于相对应的获取到的元素，则滚动位置为（0，对应元素的顶部）
    elevator.addEventListener('click', function (e) {
        if (e.target.tagName === 'A' && e.target.dataset.name) {
            const goosName = e.target.dataset.name
            console.log(goosName);
            switch (goosName) {
                case 'newGoods':
                    window.scrollTo(0, newGoods.offsetTop)
                    break
                case 'popular':
                        window.scrollTo(0, popular.offsetTop)
                    break
                case 'brand':
                        window.scrollTo(0, brand.offsetTop)
                    break
                case 'topic':
                        window.scrollTo(0, topic.offsetTop)
                    break
                default:
                    alert('出bug了')
                
            }
        }
    })

    // 给window绑定滚动事件
    // 电梯元素内获取active元素与
    window.addEventListener('scroll', function () {
        const n = document.documentElement.scrollTop

        elevator.querySelector('a.active') && elevator.querySelector('a.active').classList.remove('active')

        if (n >= newGoods.offsetTop && n < popular.offsetTop) {
            elevator.querySelector('a[data-name=newGoods]').classList.add('active')
        } else if (n >= popular.offsetTop && n < brand.offsetTop) {
            elevator.querySelector('a[data-name=popular]').classList.add('active')
        }
        else if (n >= brand.offsetTop && n < topic.offsetTop) {
            elevator.querySelector('a[data-name=brand]').classList.add('active')
        } else if (n >= topic.offsetTop) {
            elevator.querySelector('a[data-name=topic]').classList.add('active')
        }
    });


})();


